<template>
	<view class="content">
		<!--监听查看 :cy="cy" :change:cy="ol.receiveName" -->
		<view id="olMap" class="olMap" style="height: 100vh;" @click="ol.emitData" />
	</view>
</template>
<script module="ol" lang="renderjs">
	//视图层renderjs操作，注意此层中不能uniapp提供相关接口。
	// import '../../static/openlayer/v6.6.1-dist/ol.js'不支持此导入方式否则，打包失败
	export default {
		data() {
			return {
				title: 'Hello',
				//打点数据源
				wrnameData: [{
					x: '124.684607429589',
					y: '41.1910493642868',
					wrname: this.$t('warn:pointTest')
				}],
				feature: '',
				pointLayer: '',
				lng: '',
				lat: ''
			}
		},
		mounted() {
			if (typeof window.ol === 'function') {
				this.initAmap()
			} else {
				const script = document.createElement('script')
				script.src = 'static/js/ol.js' //可以通过此方式导入jquery，echart库
				script.onload = this.initAmap.bind(this)
				document.head.appendChild(script)
			}
			//可以操作节点
			// console.log(document.getElementId('olMap'))
		},
		onLoad(option) {
			this.lng = option.lng
			this.lat = option.lat
			this.wrnameData = [{
				x: option.lng,
				y: option.lat,
				wrname: this.$t('warn:pointTest')
			}]
		},
		methods: {
			initAmap() {
				var that = this
				
				/* 1. 百度投影（BD-09） */
				const bd09Projection = new ol.proj.Projection({
					code: 'BD:09',
					units: 'm',
					extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17]
				});
				ol.proj.addProjection(bd09Projection);
				
				/* 2. 百度专用分辨率 & tileGrid（原点 0,0；分辨率 2^(18-z)） */
				const resolutions = [];
				for (let z = 0; z <= 18; z++) resolutions[z] = Math.pow(2, 18 - z);
				
				const tileGrid = new ol.tilegrid.TileGrid({
					origin: [0, 0],
					resolutions
				});
				
				/* 3. 图层：用百度编号直接取瓦片 */
				const baiduLayer = new ol.layer.Tile({
					source: new ol.source.TileImage({
						projection: bd09Projection,
						tileGrid,
						tileUrlFunction([z, x, y]) {
							return `https://172.16.20.130:19100/map/tiles/${z}/${x}/${y}.png`;
						}
					})
				});
				
				/* 5. 地图 */
				this.map = new ol.Map({
					target: 'olMap',
					layers: [baiduLayer],
					view: new ol.View({
						projection: bd09Projection,
						center: that.lngLatToBdMerc([that.lng, that.lat]),
						/* 4. 经纬度 → 百度墨卡托（简单线性，生产请用精确算法） */
						zoom: 17,
						minZoom: 1,
						maxZoom: 18
					})
				});
				
				/* 6. 打点图标的图层 */
				this.pointLayer = new ol.layer.Vector({
					source: new ol.source.Vector({
						features: []
					})
				})
				this.map.addLayer(this.pointLayer)
				
				this.drawPoint()
			},

			/**
			 * 图标文字打点
			 * */
			drawPoint() {
				const that = this
				this.wrnameData.forEach((item, index) => {
					this.feature = new ol.Feature({
						geometry: new ol.geom.Point(that.lngLatToBdMerc([Number(item.x), Number(item.y)])),
						id: '11',
						shuxing: '123'
					})
					const style = new ol.style.Style({
						image: new ol.style.Icon({
							scale: 0.3,
							src: '../../../static/images/location.png',
							anchor: [0.48, 0.52]
						}),
						zindex: 100
					})
					this.feature.setStyle(style);
					this.pointLayer.getSource().addFeature(this.feature);
				});
			},
			emitData(e, ownerVm) {},
			lngLatToBdMerc([lng, lat]) {
				const a = 6378206.4; // 百度椭球长半轴
				const b = 6356583.8; // 百度椭球短半轴
				const e = Math.sqrt(1 - b * b / (a * a));
				const x = lng * Math.PI / 180 * a;
				const sinLat = Math.sin(lat * Math.PI / 180);
				const ts = Math.tan(Math.PI / 4 + lat * Math.PI / 360);
				const y = a * Math.log(ts * Math.pow((1 - e * sinLat) / (1 + e * sinLat), e / 2));
				return [x, y];
			},
		}
	}
</script>

<style>
@import url("@/static/css/ol.css");

.content {
	width: 100%;
}
</style>